<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body style="background-color: #FAFAFA">

<div class="layui-container" style="width: auto">

    <div class="layui-row">
        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('修改密码')"></div>

            <div id="app" class="layui-form" style="margin-top: 60px;font-size: 16px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">旧密码</label>
                    <div class="layui-input-block">
                        <input style="width: 250px;" v-model="oldPassword" type="password" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input style="width: 250px;" v-model="newPassword" type="password" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">验证</label>
                    <div class="layui-input-block">
                        <input style="width: 250px;" v-model="checkPassword" type="password" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <button type="button" class="layui-btn" style="margin-left: 110px; margin-top: 40px;" v-on:click="update">
                    提交
                </button>
            </div>
        </div>

    </div>

    <div th:insert="index.html::pageTail"></div>

</div>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            oldPassword: '',
            newPassword: '',
            checkPassword: ''
        },
        methods: {
            checkNullAndSpace: function (text) {
                if (text == null || text.replace(/^\s+,""/).replace(/^\s+$/, "") == '')
                    return true
                else return false
            },
            update: function () {
                if (this.checkNullAndSpace(this.oldPassword)
                    || this.checkNullAndSpace(this.newPassword)
                    || this.checkNullAndSpace(this.checkPassword)){
                    layer.open({
                        title: '错误',
                        content: '密码不能为空'
                    });
                    return
                }
                if (this.checkPassword !== this.newPassword){
                    layer.open({
                        title: '错误',
                        content: '两次输入的密码不一致！'
                    });
                    return
                }
                var requestData = {
                    oldPassword: this.oldPassword,
                    newPassword: this.newPassword
                }
                axios.put('/user/password', requestData).then(response => {
                    var status = response.data.status
                    if (status == 11)
                        layer.open({
                            content: '修改密码成功！请重新登录',
                            yes: function (index, layero) {
                                parent.location.href = '/'
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }
                        });
                    else if (status == 12)
                        layer.open({
                            title: '错误',
                            content: '旧密码错误！'
                        });
                    else
                        layer.open({
                            title: '错误',
                            content: '服务器出现异常！请稍后重试',
                        });
                })
            }
        }
    })
</script>

</body>
</html>


